<template>
  <div>
    <el-dialog title="提示" :visible.sync="dialogVisibles" width="30%">
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item prop="name">
          <el-input prefix-icon="el-icon-user-solid" placeholder="请输入账号" v-model="ruleForm.name"></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input prefix-icon="el-icon-view" placeholder="请输入密码" v-model="ruleForm.password"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisibles = false">取 消</el-button>
        <el-button type="primary" @click="comfig">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  name: "LoginName",
  data() {
    let validateName = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("请输入用户名"));
      }
      // 用户名以字母开头,长度在5-16之间,允许字母数字下划线
      const userNameRule = /^[a-zA-Z][a-zA-Z0-9_]{4,15}$/;
      if (userNameRule.test(value)) {
        this.$refs.ruleForm.validateField("checkPass");
        return callback();
      } else {
        return callback(new Error("字母开头,长度5-16之间,允许字母数字下划线"));
      }
    };
    let validatePass = (rule, value, callback) => {
      if (value === "") {
        return callback(new Error("请输入密码"));
      }
      // 密码以字母开头,长度在6-18之间,允许字母数字和下划线
      const passwordRule = /^[a-zA-Z]\w{5,17}$/;
      if (passwordRule.test(value)) {
        this.$refs.ruleForm.validateField("checkPass");
        return callback();
      } else {
        return callback(
          new Error("字母开头,长度6-18之间,允许字母数字和下划线")
        );
      }
    };
    return {
      dialogVisibles: false,
      ruleForm: {
        name: "",
        password: ""
      },
      rules: {
        name: [{ validator: validateName, trigger: "blur" }],
        password: [{ validator: validatePass, trigger: "blur" }]
      }
    };
  },
  methods: {
    showD() {
      this.dialogVisibles = true;
    },
    comfig() {
      this.$refs["ruleForm"].validate(valid => {
        if (valid) {
          this.$axios
            .post("users/login", {
              userName: this.ruleForm.name,
              password: this.ruleForm.password
            })
            .then(res => {
              if (res.code === "001") {
                this.dialogVisibles = false;
                // 弹出通知框提示注册成功信息
                // this.notifySucceed(res.msg);
                  this.$notify({
          title: '成功',
          message: '这是一条成功的提示消息',
          type: 'success'
        })
                this.$store.commit("add", this.ruleForm);
              } else {
                // 弹出通知框提示注册失败信息
                //   this.notifyError(res.msg);
              }
            });
        }
      });
    }
  }
};
</script>